// 个人设置弹窗
import { Button, Col, Divider, Flex, Row } from 'antd';
import { useMemo, useState } from 'react';
import { useIntl } from 'umi';

import emailImg from '@/assets/g_email.png';
import lockImg from '@/assets/g_lock.png';
import phoneImg from '@/assets/g_phone.png';

import ChangePhoneOrEmailModal from '@/pages/Info/components/ChangePhoneModal';
import { phoneFormatter } from '@/utils';
import ChangePassWordModal from './ChangePasswordModal';
type Props = {
  data: {
    phone: string;
    email: string;
  };
  handleOk: () => void;
};
const PersonSettingModal: React.FC<Props> = ({ data, handleOk }) => {
  const intl = useIntl();
  const [phoneModalVisible, setPhoneModalVisible] = useState(false);
  const [tag, setTag] = useState('');
  const [passwordModalVisible, setPasswordModalVisible] = useState(false);
  const [type, setType] = useState('');
  const [value, setValue] = useState('');

  const title = intl.formatMessage({
    id:
      type == 'mobile'
        ? value
          ? 'login.phone.change'
          : 'login.phone.add'
        : value
        ? 'login.email.change'
        : 'login.email.add',
  });
  const list = useMemo(() => {
    const { phone, email } = data || {};
    return [
      {
        icon: phoneImg,
        label: 'center.safe_phone',
        value: phone ? `+852 ${phoneFormatter(phone)}` : `${phoneFormatter(phone)}`,
        fn: () => {
          setPhoneModalVisible(true);
          setType('mobile');
          setTag('Personal_setting_Modify_phone_number');
          setValue(phone);
        },
      },
      {
        icon: emailImg,
        label: 'center.safe_email',
        value: email,
        fn: () => {
          setPhoneModalVisible(true);
          setType('email');
          setTag('Personal_setting_Modify_email');
          setValue(email);
        },
      },
      {
        icon: lockImg,
        label: 'center.safe_password',
        value: intl.formatMessage({ id: 'center.safe_password_tips' }),
        fn: () => {
          setPasswordModalVisible(true);
          setTag('Personal_setting_Modify_password');
          setValue('');
        },
      },
    ];
  }, [data, intl]);
  return (
    <>
      <div>
        <Row gutter={[0, 2]}>
          {list.map((item, index) => {
            const { value, label, icon, fn } = item;
            return (
              <Col key={label} span={24}>
                <Flex style={{ padding: '0 40px' }}>
                  <div style={{ margin: '3px 12px 0 0 ' }}>
                    <img width={30} height={30} src={icon} />
                  </div>
                  <div style={{ width: '100%' }}>
                    <Flex justify="space-between">
                      <div>
                        <div
                          style={{ fontSize: 20, color: '#333', marginBottom: 10, fontWeight: 700 }}
                        >
                          {intl.formatMessage({ id: label })}
                        </div>
                        <div style={{ fontSize: 16, color: '#999', lineHeight: '28px' }}>
                          {value || intl.formatMessage({ id: 'center.none' })}
                        </div>
                      </div>
                      <div onClick={fn} style={{ marginTop: 8 }}>
                        <Button
                          type="primary"
                          style={{
                            padding: '0 52px',

                            height: 50,
                            border: 'none',
                            fontSize: 16,
                          }}
                        >
                          {intl.formatMessage({
                            id:
                              index == list.length - 1
                                ? 'center.change'
                                : !value
                                ? 'home.add'
                                : 'center.change',
                          })}
                        </Button>
                      </div>
                    </Flex>
                  </div>
                </Flex>
                {index == list.length - 1 ? null : <Divider />}
              </Col>
            );
          })}
        </Row>
      </div>
      <ChangePhoneOrEmailModal
        visible={phoneModalVisible}
        handleOk={() => {
          handleOk();
          setPhoneModalVisible(false);
        }}
        title={title}
        tag={tag}
        handleCancel={() => {
          setPhoneModalVisible(false);
        }}
        type={type}
      />
      <ChangePassWordModal
        visible={passwordModalVisible}
        handleOk={() => {
          setPasswordModalVisible(false);
        }}
        tag={tag}
        handleCancel={() => {
          setPasswordModalVisible(false);
        }}
      />
    </>
  );
};

export default PersonSettingModal;
